export default class OdHandler {
    constructor() {
        this._markers = [];
        this.sourcePlaceInfo = [
            {
                id: 610100006,
                center: [108.986544, 34.198989],
                name: '曲江遗址',
            },
            {
                id: 610100009,
                center: [108.972619, 34.314341],
                name: '万达广场',
            },
            {
                id: 610100012,
                center: [108.872636, 34.239077],
                name: '大学城',
            }
        ];
        this.showId = 0
    }

    init(map) {
        this.map = map;
    }

    loadData(map) {
        let that = this;
        minemap.util.getJSON('../data/incident.json', function (error, data) {
            const infoObj = data ? data || [] : [];
        });
    }

    show(map) {
        this._initMarkers(map);
        map.setLayoutProperty('od-road', 'visibility', 'visible');
        map.setLayoutProperty('od-tracking-in', 'visibility', 'visible');
        map.setLayoutProperty('od-tracking-out', 'visibility', 'visible');
    }

    hide(map) {
        this._clearMarkers();
        map.setLayoutProperty('od-road', 'visibility', 'none');
        map.setLayoutProperty('od-tracking-in', 'visibility', 'none');
        map.setLayoutProperty('od-tracking-out', 'visibility', 'none');
    }

    _initMarkers(map) {
        let that = this;
        this.sourcePlaceInfo.map(p => {
            that._initMarker(p.id, p.name, p.center, map);
        });
    }

    _initMarker(id, name, lngLat, map) {
        if (lngLat && lngLat.length == 2) {
            let ell = document.createElement('div');
            ell.style.zIndex = 10;
            let pll = document.createElement('div');
            pll.className = 'ring-label-marker';
            pll.innerHTML = name;
            ell.appendChild(pll);
            let markerl = new minemap.Marker(ell, {offset: [-50, -50]})
                .setLngLat(lngLat)
                .addTo(this.map);
            this._markers.push(markerl);
            let el = document.createElement('div');
            el.style.zIndex = 20;
            let p = document.createElement('div');
            p.className = 'ring-point-marker';
            let p1 = document.createElement('div');
            p1.className = 'ring-point-inner';
            p1.id = id;
            p1.center = lngLat;
            p1.addEventListener('click', (e) => {
                console.log(map.getZoom())
                map.setFilter('od-road', ["==", "zone_id", Number(e.target.id)]);
                map.setFilter('od-tracking-in', ['all', ["==", "direct", 0], ["==", "zone_id", Number(e.target.id)]]);
                map.setFilter('od-tracking-out', ['all', ["==", "direct", 1], ["==", "zone_id", Number(e.target.id)]]);
                map.flyTo({
                    center: e.target.center,
                    zoom: 12,
                    speed: 0.6
                });
            })
            p.appendChild(p1);
            el.appendChild(p);
            let marker = new minemap.Marker(el, {offset: [-50, -50]})
                .setLngLat(lngLat)
                .addTo(this.map);
            this._markers.push(marker);
        }
    }

    _clearMarkers() {
        if (!this.map) {
            return
        }
        this._markers.map(marker => {
            marker.remove();
        });
        this._markers = [];
    }

    setValue(map, value) {
        if (value >= 0 && value <= 1) {
            map.style._layers['od-tracking-in'].count = 555 * value;
            map.style._layers['od-tracking-out'].count = 555 * value;
        }
    }
};